<template>
  <div>
    <el-form label-width="80px" size="mini">
      <el-form-item label="数据源">
        <data-source-btn/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="item.backgroundColor"></el-color-picker>
      </el-form-item>

      <el-collapse v-model="activeNames">
        <el-collapse-item title="标题" name="title">
          <vpd-text-style :item="item.title" />
        </el-collapse-item>
      </el-collapse>
      <!--<el-form-item label="标题">
        <el-input v-model="item.title"></el-input>
      </el-form-item>-->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="数据分组" name="group">
          <el-form-item label="分组名称">
            <el-input v-model="item.groupName"></el-input>
          </el-form-item>
          <el-form-item label="分组字段">
            <el-input v-model="item.groupField"></el-input>
          </el-form-item>
          <el-form-item label="分组数量">
            <el-input v-model="item.groupNum"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="表单样式" name="formStyle">
          <el-form-item label="标签宽度">
            <el-input-number v-model="item.labelWidth" :min="50"></el-input-number>
          </el-form-item>
          <el-form-item label="表单项">
            <el-button icon="el-icon-setting" @click="handleConfig">配置</el-button>
          </el-form-item>
          <table ref="configTable" class="form-item-config">
            <thead>
            <tr>
              <th>code</th>
              <th>名称</th>
              <th>栅格</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, $index) in item.labels" :key="$index">
              <td>{{item.code}}</td>
              <td>{{item.name}}</td>
              <td>{{item.span}}</td>
            </tr>
            </tbody>
          </table>
        </el-collapse-item>
      </el-collapse>
      <border-style :item="item"/>

    </el-form>

    <form-config v-if="formConfigVisible"
                 :options="{
                 labels: item.labels
                 }"
                 @close="formConfigVisible=false"
                 @success="handleConfigOk"/>
  </div>

</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import Style from "../../designer/components/panel/style";
  import BorderStyle from '../styles/border';
  import FormConfig from './config';
  import VpdText from '../text/index';
  import VpdTextStyle from '../text/style';

  export default {
    name: 'vpd-form-style',
    components: {
      VpdTextStyle,
      Style,
      DataSourceBtn,
      BorderStyle,
      FormConfig
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        activeNames: [],

        formConfigVisible: false,
      }
    },
    computed: {
      attrList() {
        if (this.item.dataSource && this.item.dataSource.attrList) {
          return this.item.dataSource.attrList;
        }
        return [];
      }
    },
    watch: {
      // 将数据源选择的属性，带入到表单配置
      attrList: function (val) {
        val.forEach(attr => {
          const label = this.item.labels.find(item => item.code === attr.code);
          if (!label) { //不存在的才添加
            this.item.labels.push(Object.assign({span: 12}, attr));
          }
        });
      },
      'item.uuid': function (val) {
        this.initTitle();
      }
    },
    beforeMount() {
      this.initTitle();
    },
    methods: {
      initTitle() {
        if (!this.item.title || !this.item.title.type) {
          this.item.title = VpdText.setting;
          this.item.title.text = '标题'
        }
        this.item.title.w = '100%';
        this.item.title.h = 'auto';
      },
      handleConfig() {
        this.formConfigVisible = true;
      },
      handleConfigOk(labels) {
        this.item.labels = labels;
        this.formConfigVisible = false;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .form-item-config {
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;

    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding: 5px;

      input {
        width: 100%;
      }
    }

  }
</style>
